<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户整体统计</title>
  <style>
  
    .content-right {
      width: 100%;
      overflow-y:auto;
    }

    .number-statistics {
      width: 64.5%;
      margin-top: 60px;
    }

    .number-statistics:after {
      clear: both;
      content: '';
      display: block;
    }

    .number-statistics-list {
      width: 23%;
      border: 1px solid #333;
      float: left;
      margin-right: 2%;
      text-align: center;
    }

    .number-statistics-list:last-child {
      margin-right: 0;
    }

     .number-statistics-title {
      margin-top: 28px;
      font-size: 20px;
      color: #666;
    } 

    .number-statistics-num {
      color: red;
      font-size: 20px;
    }

    .number-statistics-btn {
      width: 30%;
      height: 20px;
      line-height: 26px;
      margin-bottom: 20px;
    }

    .pie-chart {
      margin-top: 30px;
    }

    .pie-chart:after {
      clear: both;
      content: '';
      display: block;
    }

    .pie-chart-cont {
      width: 30%;
      min-height: 250px;
      border: 1px solid #333;
      float: left;
      text-align: center;
    }

    .pie-chart-mr {
      margin-right: 3%;
    }

    .pie-chart-title {
      font-size: 18px;
      color: #333;
    }
  </style>
  <base href="/">
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
<style>
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}
.table-w63{
    	width:63%;
    }
    .pareny a.active{
    background: #00FF00!important;
    border-color:#00FF00!important;
    }
</style>
</head>

<body style="background:#fff;">
<form action="fruitUser/wholeDetails" method="post"
	name="userForm" id="userForm">
	<input type="hidden" name="times" id="times">
	<input type="hidden" id="startTime" value="${pd.startTime }">
	<input type="hidden" id="endTime" value="${pd.endTime }">
<table class="table" style="margin-top: 5px;width:1000px;">
	<tr>
		<td class="pareny">
		<a class="btn btn-xs"  
			onclick="times(1);">
			今天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs"
			onclick="times(2);">
			昨天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs"
			onclick="times(3);">
			前天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs"
			onclick="times(4);">
			近7天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs"
			onclick="times(5);">
			近30天
		</a>&nbsp;&nbsp;&nbsp;自定义时间:&nbsp;
		<input class="span10 date-picker" name="startTime"
          value="${pd.startTime }"
          type="text" data-date-format="yyyy-mm-dd"
          style="width:88px;" placeholder="开始时间"
          title="开始时间"/>-
        <input class="span10 date-picker" name="endTime"
            type="text" value="${pd.endTime }"
          data-date-format="yyyy-mm-dd"
          style="width:88px;" placeholder="结束时间"
          title="结束时间"/>&nbsp;&nbsp;&nbsp;
          <a class="btn btn-light btn-xs" onclick="searchs();" title="检索"><i
			id="nav-search-icon"
			class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a>
		</td>
	</tr>
	
</table>
  <div class="content-right">
    <div class="number-statistics">
      <div class="number-statistics-list">
        <p class="number-statistics-title">注册人数</p>
        <p class="number-statistics-num">${user.registerNum}&nbsp;人</p>
         <a href="javascript:void()" onclick="register()">查看详情</a>
      </div>
      <div class="number-statistics-list">
        <p class="number-statistics-title">其中实名认证人数</p>
        <p class="number-statistics-num">${user.realNum}&nbsp;人</p>
         <a href="javascript:void()" onclick="real()">查看详情</a>
      </div>
      <div class="number-statistics-list">
        <p class="number-statistics-title">其中消费人数</p>
        <p class="number-statistics-num">${user.consumeNum}&nbsp;人</p>
        <a href="javascript:void()" onclick="consume()">查看详情</a>
      </div>
      <div class="number-statistics-list">
        <p class="number-statistics-title">消费金额</p>
        <p class="number-statistics-num">
		<c:if test="${user.real_price == null || user.real_price == ''}">0&nbsp;元</c:if> 
		<c:if test="${user.real_price != null && user.real_price != ''}">${user.real_price}&nbsp;元</c:if> 
</p>
        <a href="javascript:void()" onclick="consume()">查看详情</a>
      </div>
    </div>
    <div class="pie-chart">
      <div class="pie-chart-cont pie-chart-mr">
        <p class="pie-chart-title">男女用户比例：</p>
        <c:if test="${ratio ==null || ratio==''}">
        	<p class="number-statistics-title">未产生数据</p>
        </c:if> 
         <c:if test="${ratio.nan != 0 || ratio.nv != 0 || ratio.bm != 0}">
        	<canvas id="chart-area"></canvas>
        </c:if> 
      </div>
      <div class="pie-chart-cont pie-chart-mr">
        <p class="pie-chart-title">注册来源：</p>
        <c:if test="${ratio ==null || ratio==''}">
        	<p class="number-statistics-title">未产生数据</p>
        </c:if> 
         <c:if test="${ratio.nan != 0 || ratio.nv != 0 || ratio.bm != 0}">
        	<canvas id="chart-area1"></canvas>
        </c:if> 
      </div>
    </div>
    <div class="pie-chart">
    	<table id="simple-table"
		class="table table-striped table-bordered table-hover table-w63"
		style="margin-top: 5px">
    		<thead>
			<tr>
				<th class="center">实名认证年龄段 (岁)</th>
				<th class="center">注册人数</th>
				<th class="center">实名用户中比例 (%)</th>
				<th class="center">操作</th>
			</tr>
		</thead>
		<tbody>
			<c:if test="${info.num >0}">
			<tr>
				<td class="center">0~30</td>
				<td class="center">${info.num1 }</td>
				<td class="center">${info.num1/info.num*100 }</td>
				<td class="center"> <a href="javascript:void()" onclick="seeAge(00)">查看详情</a></td>
			</tr>
			<tr>
				<td class="center">31~50</td>
				<td class="center">${info.num2 }</td>
				<td class="center">${info.num2/info.num*100 }</td>
				<td class="center"> <a href="javascript:void()" onclick="seeAge(01)">查看详情</a></td>
			</tr>
			<tr>
				<td class="center">50以上</td>
				<td class="center">${info.num3}</td>
				<td class="center">${info.num3/info.num*100 }</td>
				<td class="center"> <a href="javascript:void()" onclick="seeAge(02)">查看详情</a></td>
			</tr>
			</c:if> 
			<c:if test="${info.num ==0}">
				<tr>
				<td class="center">无</td>
				<td class="center">无</td>
				<td class="center">无</td>
				<td class="center">无</td>
			</tr>
			</c:if>
		</tbody>
    	</table>
    </div>
    
    <div class="pie-chart">
    	<table id="simple-table"
		class="table table-striped table-bordered table-hover table-w63"
		style="margin-top: 5px">
    		<thead>
			<tr>
				<th class="center">实名认证地区</th>
				<th class="center">实名人数</th>
				<th class="center">实名用户中比例 (%)</th>
				<th class="center">操作</th>
		   </tr>
		</thead>
		<tbody>
			<c:choose>
				<c:when test="${not empty infos}">
					<c:if test="${QX.cha == 1 }">
						<c:forEach items="${infos}" var="user" varStatus="vs">
							<tr>
								<td class="center">${user.province }</td>
								<td class="center">${user.num }</td>
								<td class="center">${user.num/num*100 }</td>
								<td class="center"> <a href="javascript:void()" onclick="seeR('${user.province }')">查看详情</a></td>
							</tr>
						</c:forEach>
					</c:if>
					<c:if test="${QX.cha == 0 }">
						<tr>
							<td colspan="100" class="center">您无权查看</td>
						</tr>
					</c:if>
				</c:when>
				<c:otherwise>
					<tr class="main_info">
						<td colspan="100" class="center">没有相关数据</td>
					</tr>
				</c:otherwise>
			</c:choose>
		</tbody>
    	</table>
    </div>
  </div>
  </form>
  <!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<!-- 删除时确认窗口 -->
	<script src="static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="static/ace/js/ace/ace.js"></script>
	<!-- 日期框 -->
	<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!-- 下拉框 -->
	<script src="static/ace/js/chosen.jquery.js"></script>
	<script src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
	<script type="text/javascript" src="https://chartjs.bootcss.com/samples/utils.js"></script>
</body>

<script type="text/javascript">
$(top.hangge());
$(function(){
	$('.date-picker').datepicker({autoclose: true,todayHighlight: true});
	 var times=${pd.times}
	 $('.pareny a').eq(times-1).addClass('active')
	
})
//检索
function times(ids){
	top.jzts();
	$("#times").val(ids);
	$("#userForm").submit();
}

function searchs(){
	top.jzts();
	$("#userForm").submit();
}

function register(){
	var times=${pd.times}
	startTime=$("#startTime").val();
	endTime=$("#endTime").val();
	window.location.href='/fruitUser/listFruitUsers.do?sort=01&startTime='+startTime+'&endTime='+endTime+'&kd=1';
}

function seeAge(age){
	var times=${pd.times}
	 startTime=$("#startTime").val();
	 endTime=$("#endTime").val();
	window.location.href='/fruitUser/listFruitUsers.do?sort=01&startTime='+startTime+'&endTime='+endTime+'&age='+age+'&real=01&kd=1';
}
function seeR(province){
	var times=${pd.times}
	 startTime=$("#startTime").val();
	 endTime=$("#endTime").val();
	window.location.href='/fruitUser/listFruitUsers.do?sort=01&startTime='+startTime+'&endTime='+endTime+'&province='+province+'&real=01&kd=1';
}

function real(){
	var times=${pd.times}
	 startTime=$("#startTime").val();
	 endTime=$("#endTime").val();
	window.location.href='/fruitUser/listFruitUsers.do?sort=01&startTime='+startTime+'&endTime='+endTime+'&real=01&kd=1';
}

function consume(){
	var times=${pd.times}
	 startTime=$("#startTime").val();
	 endTime=$("#endTime").val();
	window.location.href='/fruitUser/listConsumeUsers.do?sort=01&startTime='+startTime+'&endTime='+endTime+'&kd=1';
}

</script>
<script>

nan=${ratio.nan}
nv=${ratio.nv}
bm=${ratio.bm}
iOS=${ratio.iOS}
Android=${ratio.Android}
wap=${ratio.wap}


charter('#chart-area',{
	data:[nan,nv,bm],
	labels:['男','女','保密']
})

charter('#chart-area1',{
	data:[iOS,Android,wap],
	labels:['iOS','Android','wap']
})

function charter(ele,options){
	var config = {
			type: 'pie',
			data: {
				datasets: [{
					data: options.data,
					backgroundColor: [
						window.chartColors.blue,
						window.chartColors.red,
						window.chartColors.yellow,
					]
				}],
				labels: options.labels
			},
			options: {
				responsive: true,
				legend: {
					position: 'right',
				},
			}
		};
	var ctx = document.querySelector(ele).getContext('2d');
	new Chart(ctx, config);
}


	/* var randomScalingFactor = function() {
		return Math.round(Math.random() * 100);
	};
	console.log(Math.round(Math.random() * 100))

	

	window.onload = function() {
		var ctx = document.getElementById('chart-area').getContext('2d');
		window.myPie = new Chart(ctx, config);
	};
	var colorNames = Object.keys(window.chartColors); */
		
	</script>

</html>
